<template>
    <el-table
        :data="dataList"
        :row-key="rowKey"
        style="width: 728px"
        :height="tableHeight"
        @row-click="onRowClickHandle"
        @cell-mouse-enter="onCellMouseEnter">
        <!-- radio -->
        <el-table-column v-if="!multiple" fixed="left" align="center" :width="50">
            <template #default="scope">
                <el-radio v-model="radio" :label="scope.row[rowKey]">
                    <i></i>
                </el-radio>
            </template>
        </el-table-column>
        <template v-for="item in tableOptions" :key="item.prop">
            <el-table-column :label="item.label" :width="item.width">
                <template #default="scope">
                    <div v-if="item.render">
                        <component :is="item.render" v-bind="scope" />
                    </div>
                    <div v-else>
                        <el-tooltip effect="dark" placement="top" :disabled="scope.row.disabledTooltip">
                            <div class="tooltipText">{{ scope.row[item.prop] || '--' }}</div>
                            <template #content>
                                <el-scrollbar max-height="200px">
                                    <div class="tooltipContent">{{ scope.row[item.prop] }}</div>
                                </el-scrollbar>
                            </template>
                        </el-tooltip>
                    </div>
                </template>
            </el-table-column>
        </template>
        <template #empty>
            <div class="table-empty">
                <el-image :src="noDataIcon" />
                <span class="no-data-text">暂无数据</span>
            </div>
        </template>
    </el-table>
</template>

<script setup lang="ts">
import { ref, watch, inject, computed } from 'vue';
import { ElTable, ElTableColumn, ElRadio, ElTooltip } from 'element-plus';
const multiple: boolean = inject('multiple', false);
const rowKey: string = inject('rowKey', 'id');
const radioData: any = inject('radioData', null);
const getRadioData = inject('getRadioData', Function, true);
const searchOptions: any[] = inject('searchOptions', []);

interface PropsType {
    checkboxData: Array<any>;
    dataList: Array<any>;
    tableOptions: Array<any>;
}

const props = withDefaults(defineProps<PropsType>(), {
    checkboxData: () => [],
    dataList: () => [],
    tableOptions: () => []
});

const radio = ref<string | number>();
const noDataIcon = ref<string>('https://img.static-keyid.cn/toolspace/scrm/2023/09/1695719275824qua76jgi6q47gdij.png');
const emits = defineEmits<{
    (e: 'change', val: any): void;
}>();

/**
 * @description: 计算table高度
 * @param {*} computed
 * @return {*}
 */
const tableHeight = computed(() => 560 - 42 - Math.ceil((searchOptions.length + 1) / 2) * 42);

watch(radio, () => {
    const currentRadioData = props.dataList.find(item => item[rowKey] === radio.value);
    if (currentRadioData) {
        getRadioData(currentRadioData);
        emits('change', currentRadioData);
    }
});

watch(
    () => radioData,
    () => {
        if (radioData) {
            radio.value = radioData[rowKey];
            getRadioData(radioData);
            emits('change', radioData);
        }
    },
    { immediate: true, deep: true }
);

const selectionChange = () => {};

/**
 * @description: 处理点击单行事件，点击时选中该行
 * @param {*} row
 * @param {*} column
 * @param {*} event
 * @return {*}
 */
const onRowClickHandle = (row, column, event) => {
    if (!multiple) {
        radio.value = row[rowKey];
    }
};

/**
 * @description: 处理文本内容超出时显示浮框
 * @param {*} row
 * @param {*} column
 * @param {*} cell
 * @return {*}
 */
const onCellMouseEnter = (row: any, column: any, cell: any) => {
    const cellHtml = cell.querySelector('.cell') as HTMLDivElement;
    const range = document.createRange();
    range.setStart(cellHtml, 0);
    range.setEnd(cellHtml, cellHtml.childNodes.length);
    const rangeHeight = ~~range.getBoundingClientRect().height;
    const padding =
        (parseInt(window.getComputedStyle(cellHtml).paddingTop, 10) || 0) +
        (parseInt(window.getComputedStyle(cellHtml).paddingBottom, 10) || 0);
    if (rangeHeight + padding > cellHtml.offsetHeight || cellHtml.scrollHeight > cellHtml.offsetHeight) {
        row.disabledTooltip = false;
    } else {
        row.disabledTooltip = true;
    }
};
</script>

<style lang="scss" scoped>
.el-table {
    border: 1px solid #ebeef5;
}

.tooltipText {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    text-overflow: ellipsis;
    overflow: hidden;
}

.tooltipContent {
    width: 300px;
}

.table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .no-data-text {
        font-size: 12px;
        color: #999;
    }
}

:deep(.el-table__row) {
    .el-table__cell {
        .cell {
            height: 74px;
            display: flex;
            align-items: center;

            & > div {
                width: 0;
                flex: 1;
            }
        }
    }
}
</style>
